<!-- AI对话页面 -->
<route lang="json">
{
  "style": {
    "navigationBarTitleText": "AI对话",
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTextStyle"
  },
  "name": "chat"
}
</route>

<template>
  <view class="chat-page" :class="{ 'theme-dark': theme === 'dark', 'theme-light': theme === 'light' }">
    <!-- 聊天消息列表 -->
    <scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation>
      <view class="message-list">
        <!-- 欢迎消息 -->
        <view class="message-item ai-message">
          <view class="message-avatar">
            <text class="avatar-text">🤖</text>
          </view>
          <view class="message-content">
            <view class="message-bubble ai-bubble">
              <text class="message-text">您好！我是您的AI分身助手，有什么我可以帮助您的吗？</text>
            </view>
          </view>
        </view>

        <!-- 聊天消息 -->
        <view v-for="(message, index) in messages" :key="index" class="message-item" :class="message.type + '-message'">
          <view class="message-avatar" v-if="message.type === 'ai'">
            <text class="avatar-text">🤖</text>
          </view>
          <view class="message-content">
            <view class="message-bubble" :class="message.type + '-bubble'">
              <text class="message-text">{{ message.content }}</text>
              <text class="message-time">{{ message.time }}</text>
            </view>
          </view>
          <view class="message-avatar" v-if="message.type === 'user'">
            <text class="avatar-text">👤</text>
          </view>
        </view>

        <!-- 正在输入提示 -->
        <view v-if="isTyping" class="message-item ai-message typing-message">
          <view class="message-avatar">
            <text class="avatar-text">🤖</text>
          </view>
          <view class="message-content">
            <view class="message-bubble ai-bubble">
              <view class="typing-indicator">
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-container">
        <view class="input-box">
          <textarea
            v-model="inputText"
            placeholder="输入您的问题..."
            class="input-textarea"
            :placeholder-class="'input-placeholder ' + (theme === 'dark' ? 'dark-placeholder' : '')"
            @input="onInput"
            @confirm="sendMessage"
            auto-height
            :max-height="100"
          />
        </view>
        <view class="send-button" :class="{ active: inputText.trim() }" @click="sendMessage">
          <text class="send-icon">➤</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useTheme } from '@/hooks';

export default {
  data() {
    return {
      inputText: '',
      scrollTop: 0,
      isTyping: false,
      messages: []
    };
  },
  setup() {
    const { theme } = useTheme();
    return {
      theme
    };
  },
  methods: {
    onInput(e) {
      this.inputText = e.detail.value;
    },

    async sendMessage() {
      if (!this.inputText.trim()) return;

      const userMessage = {
        type: 'user',
        content: this.inputText.trim(),
        time: this.formatTime(new Date())
      };

      this.messages.push(userMessage);
      this.inputText = '';
      this.scrollToBottom();

      // 显示正在输入
      this.isTyping = true;

      // 模拟AI回复
      setTimeout(() => {
        this.isTyping = false;
        const aiMessage = {
          type: 'ai',
          content: this.generateAIResponse(userMessage.content),
          time: this.formatTime(new Date())
        };
        this.messages.push(aiMessage);
        this.scrollToBottom();
      }, 1500);
    },

    generateAIResponse(userInput) {
      // 简单的AI回复逻辑
      const responses = [
        '感谢您的问题！基于您的数据，我可以为您提供个性化的建议。',
        '这是一个很有趣的问题。让我为您分析一下您的数字身份价值。',
        '根据您的数据足迹，我发现了一些有价值的洞察。',
        '您的问题让我想到了一些重要的数据维度。让我为您详细解答。',
        '作为您的AI分身，我很乐意帮助您了解这个问题。'
      ];

      if (userInput.includes('价值') || userInput.includes('多少')) {
        return '根据您的数据活跃度和质量，您的数字身份当前估值约为 ¥2,350。这个价值会随着您的数据贡献持续增长。';
      } else if (userInput.includes('隐私') || userInput.includes('安全')) {
        return '您的隐私安全是我们的首要关注。所有数据都经过加密处理，您拥有完全的控制权。';
      } else if (userInput.includes('收益') || userInput.includes('赚钱')) {
        return '通过数据贡献，您本月已获得 42 积分。这些积分可以兑换现金或优惠券。';
      }

      return responses[Math.floor(Math.random() * responses.length)];
    },

    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },

    scrollToBottom() {
      this.$nextTick(() => {
        // 触发滚动更新
        this.scrollTop = this.scrollTop === 0 ? 1 : 0;
        setTimeout(() => {
          // 滚动到底部，考虑固定输入区域的高度
          this.scrollTop = 99999;
        }, 150);
      });
    }
  },

  onLoad(options) {
    // 从URL参数获取初始问题
    if (options.question) {
      this.inputText = decodeURIComponent(options.question);
    }
  },

  onReady() {
    // 页面渲染完成后滚动到底部
    this.scrollToBottom();
  }
};
</script>

<style lang="scss" scoped>
.chat-page {
  background: var(--bsin-bgPrimary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
  position: relative;
}

.chat-messages {
  flex: 1;
  padding: 20px 15px 10px;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
  min-height: calc(100vh - 110px - env(safe-area-inset-bottom));
  overflow-y: auto;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ai-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.user-message .message-avatar {
  background: linear-gradient(135deg, #4299e1, #667eea);
}

.avatar-text {
  font-size: 18px;
  color: white;
}

.message-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  position: relative;
}

.ai-bubble {
  background: var(--bsin-bgCard);
  border-bottom-left-radius: 6px;
}

.user-bubble {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-bottom-right-radius: 6px;
  margin-left: auto;
}

.theme-dark .ai-bubble {
  background: var(--bsin-bgCard);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.message-text {
  color: #2d3748;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  transition: color 0.3s ease;
}

.user-bubble .message-text {
  color: white;
}

.theme-dark .ai-bubble .message-text {
  color: #e2e8f0;
}

.message-time {
  font-size: 11px;
  color: #a0aec0;
  margin-top: 4px;
  text-align: right;
}

.user-bubble .message-time {
  color: rgba(255, 255, 255, 0.8);
}

/* 正在输入动画 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e0;
  animation: typing 1.4s infinite ease-in-out;
}

.theme-dark .dot {
  background: #4a5568;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 输入区域 */
.input-area {
  background: var(--bsin-bgCard);
  padding: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.theme-dark .input-area {
  background: var(--bsin-bgCard);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.input-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.input-box {
  flex: 1;
  background: var(--bsin-bgSecondary);
  border-radius: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}

.theme-dark .input-box {
  background: var(--bsin-bgSecondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.input-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #2d3748;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  transition: color 0.3s ease;
}

.theme-dark .input-textarea {
  color: #e2e8f0;
}

.input-placeholder {
  color: #a0aec0;
}

.dark-placeholder {
  color: #718096;
}

.send-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.send-button.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transform: scale(1.05);
}

.send-icon {
  font-size: 18px;
  color: #a0aec0;
  transition: color 0.3s ease;
}

.send-button.active .send-icon {
  color: white;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .chat-messages {
    padding: 15px 10px;
    padding-bottom: calc(95px + env(safe-area-inset-bottom));
  }

  .message-avatar {
    width: 35px;
    height: 35px;
  }

  .avatar-text {
    font-size: 16px;
  }

  .message-content {
    max-width: 75%;
  }

  .message-bubble {
    padding: 10px 14px;
  }

  .message-text {
    font-size: 14px;
  }

  .input-area {
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
</style>
